import echarts from "echarts"
export default {
    data(){
        return{
            lineChart: null
        }
    },

  methods: {
    renderLineChart(list) {
      // const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      let dataObj = {
        data0: [],
        data1: [],
        data2: []
      }
      let xLabel = [],
          series = [],
          colorList = [
            ['#9effff', '#9E87FF', 'rgba(158,135,255, 0.3)', "#9E87FF"],
            ['#73DD39', '#73DDFF', 'rgba(115,221,255, 0.3)', '#73DDFF'],
            ['#fe9a', '#fe9a8b', 'rgba(254,154,139, 0.3)', '#fe9a8b']
        ]
          
      list.forEach((it) => {
        xLabel.push(it.date.substring(5))
        dataObj.data0.push(it.received)
        dataObj.data1.push(it.receiving)
        dataObj.data2.push(it.total)
      });
      series = ['已收','未收','待收'].map((_name,i) => {
        return {
          name: _name,
          type: 'line',
          data: dataObj[`data${i}`],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: colorList[i][0]
              },
              {
                offset: 1,
                color: colorList[i][1]
              }
            ]),
            shadowColor: colorList[i][2],
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList[i][0],
              borderColor: colorList[i][3]
            }
          }
        }
      })
      let option = {
        backgroundColor: '#fff',
        
        legend: {
          icon: 'circle',
          top: '5%',
          right: '5%',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677' 
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '15%'
        },
        xAxis: [{
          type: 'category',
          data: xLabel,
          axisLine: {
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#556677'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          axisPointer: {
            label: {
              // padding: [11, 5, 7],
              padding: [0, 0, 10, 0],
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                }, {
                  // offset: 0.9,
                  offset: 0.86,
                  color: '#fff' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#556677'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series
        // series: [{
        //     name: '已收',
        //     type: 'line',
        //     data: [10, 10, 30, 12, 15, 3, 7],
        //     symbolSize: 1,
        //     symbol: 'circle',
        //     smooth: true,
        //     yAxisIndex: 0,
        //     showSymbol: false,
        //     lineStyle: {
        //       width: 5,
        //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //           offset: 0,
        //           color: '#9effff'
        //         },
        //         {
        //           offset: 1,
        //           color: '#9E87FF'
        //         }
        //       ]),
        //       shadowColor: 'rgba(158,135,255, 0.3)',
        //       shadowBlur: 10,
        //       shadowOffsetY: 20
        //     },
        //     itemStyle: {
        //       normal: {
        //         color: colorList[0],
        //         borderColor: colorList[0]
        //       }
        //     }
        //   }, {
        //     name: '未收',
        //     type: 'line',
        //     data: [5, 12, 11, 14, 25, 16, 10],
        //     symbolSize: 1,
        //     symbol: 'circle',
        //     smooth: true,
        //     yAxisIndex: 0,
        //     showSymbol: false,
        //     lineStyle: {
        //       width: 5,
        //       color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
        //           offset: 0,
        //           color: '#73DD39'
        //         },
        //         {
        //           offset: 1,
        //           color: '#73DDFF'
        //         }
        //       ]),
        //       shadowColor: 'rgba(115,221,255, 0.3)',
        //       shadowBlur: 10,
        //       shadowOffsetY: 20
        //     },
        //     itemStyle: {
        //       normal: {
        //         color: colorList[1],
        //         borderColor: colorList[1]
        //       }
        //     }
        //   },
        //   {
        //     name: '待收',
        //     type: 'line',
        //     data: [15, 12, 17, 14, 50, 16, 11],
        //     symbolSize: 1,
        //     yAxisIndex: 0,
        //     symbol: 'circle',
        //     smooth: true,
        //     showSymbol: false,
        //     lineStyle: {
        //       width: 5,
        //       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        //           offset: 0,
        //           color: '#fe9a'
        //         },
        //         {
        //           offset: 1,
        //           color: '#fe9a8b'
        //         }
        //       ]),
        //       shadowColor: 'rgba(254,154,139, 0.3)',
        //       shadowBlur: 10,
        //       shadowOffsetY: 20
        //     },
        //     itemStyle: {
        //       normal: {
        //         color: colorList[2],
        //         borderColor: colorList[2]
        //       }
        //     }
        //   }
        // ]
      };
      this.lineChart.setOption(option)
    }
    
  },
  

}
